<template>
    <div style="display: flex;width: 100%;justify-content: center;">
      <el-row>
        <el-col :offset="6" :span="12">
          <div id="leidatu" style="width: 800px;height:400px;"></div>
        </el-col>
        <el-col :offset="4":span="12">
          <AllKaoshi></AllKaoshi>
        </el-col>
      </el-row>
    </div>

  </template>

  <script>
  import user from '@/api/user'
  import auth from '@/api/auth'
  import statistic from '@/api/statistic'
  //引入组件AllKaoshi
  import AllKaoshi from '@/views/student/AllKaoshixixn.vue'
  export default {
    components: {
      AllKaoshi
    },
    name: 'UserManage',
    data () {
      return {
        // 添加雷达图数据
        radarData: {
        },
        currentUserInfo:{}
      }
    },
    created () {
        user.getCurrentUser().then((resp) => {
          if (resp.code === 200) {
            resp.data.password = ''
            this.currentUserInfo = resp.data;
            this.showUpdateNoticeDialog()
          }
        })
    },
    methods: {
      // 添加雷达图绘制方法
      drawRadar() {
        let myChart = this.$echarts.init(document.getElementById('leidatu'));

        // 计算百分比后的值
        let valuesInPercent = this.radarData.values.map(v => ((v / this.radarData.zf) * 100).toFixed(1));

        myChart.setOption({
          title: {
            text: '能力分析雷达图',
            x: 'center',
          },
          radar: {
            indicator: this.radarData.categories.map(category => ({
              name: category, // 确保每个属性名称正确显示
              max: 100, // 100% 为满值
              color: '#409EFF'
            })),
            shape: 'circle',
            splitNumber: 5, // 让刻度更均匀
            radius: '70%',
          },
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              let tooltipContent = `<strong>${params.seriesName}</strong><br/>`;
              tooltipContent += `<span style="color:#909399;font-size:12px">根据题目权重和得分计算</span><br/>`;
              params.value.forEach((val, i) => {
                tooltipContent += `${this.radarData.categories[i]}: ${val}%<br/>`;
              });
              return tooltipContent;
            }
          },
          series: [{
            name: '能力得分',
            type: 'radar',
            data: [{
              value: valuesInPercent,
              name: '能力得分', // 这里确保 `name` 仍然正确
              areaStyle: {
                color: 'rgba(64,158,255,0.3)'
              },
              lineStyle: {
                color: '#409EFF'
              },
              itemStyle: {
                color: '#409EFF'
              }
            }]
          }]
        });
      },
      showUpdateNoticeDialog(row){
        var that = this;

        // 获取数据
        statistic.huaxiang({ 'userId': this.currentUserInfo.id }).then((resp) => {
          console.log(resp)
          var list = resp.data;

          var categories = list.map(item => item.name);
          var values = list.map(item => item.value);

          var total = values.reduce((sum, val) => sum + val, 0); // 计算总分

          // 存入雷达图数据
          this.radarData = {
            categories: categories,
            values: values,
            zf: total || 100 // 避免除零错误，默认满分 100
          }

          that.drawRadar();
        })
      },
    }
  }
  </script>

  <style scoped lang="scss">
  @import "../../assets/css/admin/userManage";
  </style>
